<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Zero Defect 用户管理</title>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../static/css/dashboard.css" rel="stylesheet"/>
    <link href="../static/css/sticky-footer-navbar.css" rel="stylesheet"/>
    <style type="text/css" rel="stylesheet">
        .footer {
            width: 75%;
        }

        .sidebar {
            top: 50px;
        }

        .groupCell {
            border-radius: 5px;
            border: 1px solid #AAAAAA;
            background-color: #DDDDDD;
            font-size: 14px;
            margin: 5px;
            padding: 2px;
        }
        .groupButton {
            margin: auto 5px;
        }
    </style>
    <script src="../static/js/lib/jquery.min.js"></script>
    <script src="../static/js/lib/bootstrap.min.js"></script>
    <script src="../static/js/lib/163-angular.min.js"></script>
    <script src="../static/js/app.js"></script>
    <script src="../static/js/user.js"></script>
    <script src="../static/js/idService.js"></script>
    <script src="../static/js/commonService.js"></script>
</head>
<body ng-app="app" ng-controller="userCtrl">

<!-- 导航 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-header brand">
        <a class="navbar-brand" href="#">Zero Defect</a>
    </div>
    <div class="container">
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown" ng-if="isDeveloper || isRequire || isTester">
                    <a href="#" clasks="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">当前工作<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">当前工作</li>
                        <li><a href="/defect">待办工作</a></li>
                        <li><a href="/defect" ng-click="toAdd()">提出问题</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">历史工作</li>
                        <li><a href="/defect" ng-click="toMyStarted()">我提出的问题</a></li>
                        <li><a href="/defect" ng-click="toMyResolved()">我解决的问题</a></li>
                    </ul>
                </li>
                <li class="active">
                    <a href="/user" ng-if="isManager">系统管理</a>
                </li>
                <li><a href="/project" ng-if="isDeveloper || isRequire || isTester">项目管理</a></li>
                <li><a href="/about">关于</a></li>
                <!--<li><a href="/exit" class="navbar-right">退出</a></li>-->
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">{{principle.firstName}} ({{principle.id}}) <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">设置</a></li>
                        <li><a href="/exit">退出</a></li>
                    </ul>
                </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
<!-- 内容 -->
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 sidebar">
            <ul class="nav nav-sidebar">
                <li><a href="#" ng-click="toList()">用户列表</a></li>
                <li><a href="#" ng-click="toGroup()">用户组</a></li>
                <li><a href="#" data-toggle="modal" data-target="#addModal">添加用户</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 main">
            <section class="col-sm-12" ng-if="showList">
                <h2 class="sub-header">用户列表</h2>
                <div class="table-responsive" ng-init="getAllUser()">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>用户名</th>
                            <th>名称</th>
                            <th>密码</th>
                            <th>所属组</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="user in userList">
                            <td>{{user.userId}}</td>
                            <td>{{user.name}}</td>
                            <td>******</td>
                            <td>
                                <button class="btn btn-sm btn-default groupButton" ng-repeat="group in user.groupList">{{group.name}}</button>&nbsp;
                                <!--<span class="groupCell" ng-repeat="group in user.groupList">{{group.name}}</span>-->
                            </td>
                            <td>delete</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </section>

            <section class="col-sm-12" ng-if="showGroup">
                <h2 class="sub-header">用户组</h2>
                <div class="table-responsive" ng-init="getAllGroup()">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>组标识</th>
                            <th>组名称</th>
                            <th>查看成员</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="group in groupList">
                            <td>{{group.id}}</td>
                            <td>{{group.name}}</td>
                            <td>
                                <button class="btn btn-sm btn-default" ng-click="getGroupUser(group)">查看成员</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div ng-if="currentGroup != null">
                    <h3 class="sub-header">{{currentGroup}} 的成员</h3>
                    <div class="table-responsive" ng-init="getAllGroup()">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <td>用户名</td>
                                <td>名称</td>
                                <td>密码</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="user in groupUserList">
                                <td>{{user.userId}}</td>
                                <td>{{user.name}}</td>
                                <td>******</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">添加用户</h4>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">用户名：</label>
                        <div class="col-sm-8">
                            <input class="form-control" ng-model="user.userId"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">名称：</label>
                        <div class="col-sm-8">
                            <input class="form-control" ng-model="user.name"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">密码：</label>
                        <div class="col-sm-8">
                            <input class="form-control" ng-model="user.password"/>
                        </div>
                    </div>
                    <div class="form-group" ng-init="getAllGroup()">
                        <label class="col-sm-3 control-label">所属组：</label>
                        <div class="col-sm-8">
                            <span ng-repeat="group in groupList">
                                <input type="checkbox" ng-true-value="true" ng-fasle-value="false"
                                       ng-model="group.checked"/>{{group.name}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="addUser()">添加</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="footer col-sm-offset-3 col-sm-9">
    <div class="container col-sm-9">
        <p class="text-muted">Zero Defect. 版权所有 2018.02.04</p>
    </div>
</footer>


</body>
</html>